
<template>
  <!-- 
@description  递归路由
@author ZhaoliangJi
@param  {Class} arise-east-active => 点击对应路由添加class
@param  {Class} arise-east-hover =>  划过样式
@param  {Class} arise-east-isPointer =>   路由中meta.isPointer为false时 => 父路由的样式 
@time2021-11-12 14:58:07
      -->
  <div id="router">
    <div v-for="(v, i) in RouterList" :key="i">
      <div
        class="arise-east-router"
        :class="{
          'arise-east-active': $store.state.current == v.meta.title,
          'arise-east-hover': v.meta.isPointer,
          'arise-east-isPointer': !v.meta.isPointer,
        }"
        :style="{
          'text-indent': v.meta.defaultState ? '20px' : '40px',
        }"
        @click="addClass(v.meta.title, v)"
        v-if="v.meta.title && v.meta.isNav === true"
      >
        <svg
          t="1637140219119"
          v-if="!v.meta.isPointer && !v.meta.defaultState"
          @click="putAway(v.name)"
          class="icon put-away"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2612"
          width="30"
          height="30"
        >
          <path
            d="M533.333333 776.533333L341.333333 584.533333l29.866667-29.866666 162.133333 162.133333 162.133334-162.133333 29.866666 29.866666-192 192z m0-503.466666l-162.133333 162.133333-29.866667-29.866667L533.333333 213.333333 725.333333 405.333333l-29.866666 29.866667-162.133334-162.133333z"
            fill="#2c2c2c"
            p-id="2613"
          ></path>
        </svg>
        <svg
          t="1637574370545"
          v-if="!v.meta.isPointer && v.meta.defaultState"
          @click="putAway(v.name)"
          class="icon put-away"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="11875"
          width="30"
          height="30"
        >
          <path
            d="M533.333333 776.533333L341.333333 584.533333l29.866667-29.866666 162.133333 162.133333 162.133334-162.133333 29.866666 29.866666-192 192z m0-503.466666l-162.133333 162.133333-29.866667-29.866667L533.333333 213.333333 725.333333 405.333333l-29.866666 29.866667-162.133334-162.133333z"
            fill="#118bfd"
            p-id="11876"
          ></path>
        </svg>
        {{ v.meta.title }}
      </div>
      <transition name="navRouterAnimation">
        <navigation
          v-show="v.meta.defaultState"
          :RouterList="v.children"
        ></navigation>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  //递归核心 =>'It' is doomed to perish
  name: "navigation",
  props: ["RouterList"],
  data() {
    return {
      routerFilter: {},
      Parent: {},
    };
  },
  created() {
    //默认页面
    this.$store._mutations.ROUTER_NAME[0]("Assembly");
    //默认选中项
    this.$store._mutations.CURRENT[0]("tsinghua-Ui");
  },
  methods: {
    //动态添加样式  设立标识符
    addClass(index, raw) {
      //isPointer => 父组件不添加样式
      if (raw.meta.isPointer) {
        this.$store._mutations.CURRENT[0](index);
        // 暂未定
        if (raw.name == "HomeApp") {
          this.$store._mutations.ROUTER_NAME[0]("Assembly");
        } else {
          //全局title
          // document.title = index;
          //恢复右侧默认选项
          this.$store._mutations.CURRENT_INDEX[0]("ds-cloud-0");
          //改变路由
          this.$store._mutations.ROUTER_NAME[0](raw.name);
        }
      }
    },
    //更新
    handlerUpdate() {
      console.log('我被触发了');
      this.$forceUpdate();
    },
    //展开收起
    putAway(name) {
      function getCurrent(routers) {
        for (let index = 0; index < routers.length; index++) {
          //点击路由相同时
          if (routers[index].name == name) {
            routers[index].meta.defaultState =
              !routers[index].meta.defaultState;
          }
          if (routers[index].children && routers[index].children.length > 0) {
            getCurrent(routers[index].children);
          }
        }
      }
      getCurrent(this.$router.options.routes);
      this.handlerUpdate();
    },
  },
};
</script>

<style scoped>
.arise-east-router {
  height: 40px;
  line-height: 40px;
  text-indent: 30px;
  position: relative;
  overflow: hidden;
  font-size: 13px;
  color: black;
}

.arise-east-router:after {
  content: "";
  display: block;
  position: absolute;
  background: white;
  width: 50px;
  height: 125px;
  opacity: 20%;
  transform: rotate(-45deg);
  top: -36px;
  left: -100px;
}

.arise-east-router:hover:after {
  left: 120%;
  transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
  -webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
}

.arise-east-hover:hover {
  color: #118bfd;
  cursor: pointer;
}

.arise-east-active {
  color: #118bfd;
}
/*父路由*/
.arise-east-isPointer {
  font-weight: bold;
}

.put-away {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.navRouterAnimation-enter-to {
  transition: all 1s ease;
  transform: translateY(0);
}

/*上一个元素消失的动画*/
.navRouterAnimation-leave-active {
  transition: all 0.5s ease;
  opacity: 0;
  transform: translateY(-40px);
}

/*下一个元素进入的动画效果*/
.navRouterAnimation-enter {
  transform: translateX(-100%);
}

.navRouterAnimation-leave {
  transform: translateY(0);
}
</style>